<template>
  <div class="search-card">
    <div v-if="inputValue.length === 0" class="search-prompt">
      <div class="search-prompt-text">任务、标签、内容</div>
      <div class="search-prompt-text">在此都可搜搜</div>
    </div>
    <div v-else-if="searchResult === 0" class="not">适合安静的一天</div>
    <div v-else class="search-list">
      <div v-for="(item, index) in showList" :key="index" class="search-list-item">
        <div :class="[item.switch ? 'item-switch-active' : '']" class="item-switch" @click="ItemSwitch(item.id, index)"></div>
        <div class="item-text-box">
          <div class="box-text-up">
            <span class="item-time">{{ item.time }}</span>
            <span class="item-title">{{ item.title }}</span>
          </div>
          <div v-if="item.content.length !== 0" class="box-text-down">
            <div class="item-content">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <div v-show="searchResult === 1" class="tail-text">哥，这次真没了~</div>
    </div>
  </div>
  <div class="mask" @click="Gohome"></div>
</template>

<script setup>
import { defineProps, watch, defineEmits, reactive } from 'vue';
const props = defineProps({
  list: {
    type: Array,
    default: () => [
      {
        switch: 0,
        time: '2020.04.20',
        title: '日报撰写',
        content: '',
      },
    ],
  },
  switch: {
    type: Number,
    default: -1,
  },
  inputValue: {
    type: String,
    default: '',
  },
});

let showList = reactive([]);
let searchResult = -1;

const emit = defineEmits(['homego']);
// 监听 props.switch 的变化
watch(
  () => props.switch,
  (newValue) => {
    if (newValue) {
      NoSearch();
    }
  },
);
// 监听 props.inputValue 的变化
watch(
  () => props.inputValue,
  (newValue) => {
    SearchList(newValue);
  },
);

function SearchList(str) {
  showList = [];
  let index = [];
  searchResult = 0;
  let turnItem = [];
  props.list.forEach((item) => {
    for (let ii = 0; ii < str.length; ii++) {
      index[0] = item.time.indexOf(str[ii]);
      index[1] = item.title.indexOf(str[ii]);
      index[2] = item.content.indexOf(str[ii]);

      for (let i = 0; i < 3; i++) {
        if (index[i] !== -1) {
          showList.push(item);
          searchResult = 1;

          return;
        }
      }
    }
  });
}

function NoSearch() {
  document.querySelector('.search-card').style.display = 'block';
  document.querySelector('.search-card').style.zIndex = '100';
  document.querySelector('.mask').style.display = 'block';
  document.querySelector('.mask').style.zIndex = '99';
}

function Gohome() {
  emit('homego', -1);
  document.querySelector('.search-card').style.display = 'none';
  document.querySelector('.mask').style.display = 'none';
  document.querySelector('.search-card').style.zIndex = '0';
}
function ItemSwitch(id, index) {
  document.getElementsByClassName('item-switch ')[index].classList.add('item-switch-active');
  setTimeout(function () {
    emit('homego', id);
  }, 200);
}
</script>

<style scoped>
.search-card {
  position: absolute;
  top: 18.842365%;
  width: 91.466667%;
  height: 39.285714%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  justify-content: center;
  text-align: center;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}
.search-prompt {
  margin-top: 52.351097%;
}
.search-prompt-text {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 21.72px;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
  vertical-align: top;
}
.search-list {
  width: 100%;
  height: 73%;
  margin-top: 20%;
  overflow-y: auto;
}
.search-list-item {
  position: relative;
  width: 100%;
  height: 17.554859%;
}
.item-switch {
  position: absolute;
  width: 6.413994%; /* 调整为需要的尺寸 */
  aspect-ratio: 1;
  border-radius: 50%; /* 将元素设置为圆形 */
  border: 1px solid rgb(52, 120, 246); /* 边框为蓝色，2px粗细 */
  background-color: rgb(237, 244, 254); /* 背景色为灰色 */
  cursor: pointer;
  left: 4.664723%;
  top: 50%;
  transform: translateY(-50%);
}
.item-switch-active {
  border: 1px solid blue;
  background-color: rgb(52, 120, 246);
}
.item-time {
  max-width: 32%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-time-text {
  display: flex;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
}
.item-time-text-active {
  color: rgb(70, 135, 247);
}
.item-title {
  max-width: 68%;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 21.72px;
  color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-content {
  width: 100%;
  position: absolute;
  left: 1%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.38px;
  color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-text-box {
  margin-left: 15.74344%;
  width: 79%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.box-text-up {
  position: relative;
  width: 100%;
  height: 50%;
  display: flex;
}
.box-text-down {
  position: relative;
  width: 100%;
  height: 50%;
}
.tail-text {
  margin-top: 5%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.38px;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  vertical-align: top;
}
.not {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 34.75px;
  color: rgba(0, 0, 0, 0.2);
  text-align: left;
  vertical-align: top;
}
@media (prefers-color-scheme: dark) {
  .search-card {
    background: rgba(27, 27, 29, 1);
    color: rgb(255, 255, 255);
  }
  .search-card * {
    background: rgba(27, 27, 29, 1);
    color: rgb(255, 255, 255);
  }
  .item-switch-active {
    border: 1px solid blue;
    background-color: rgb(52, 120, 246);
  }
}
</style>
